<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>萤窗 - 温暖治愈空间</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

    :root {
      --color-primary: #FF9E80;
      --color-secondary: #FFECB3;
      --color-accent: #FF7043;
      --color-background: #FFF9F5;
      --color-text: #5D4037;
      --color-text-light: #8D6E63;
      --color-card: #FFFFFF;
      --color-warm: #FFD0A0;
    }

    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: var(--color-background);
      color: var(--color-text);
      transition: all 0.3s ease;
      margin: 0;
      padding: 0;
      height: 100vh;
      overflow-x: hidden;
    }

    .warm-gradient {
      background: linear-gradient(135deg, #FFEDD0 0%, #FFECB3 50%, #FFD0A0 100%);
    }

    .soft-shadow {
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.12);
    }

    .gentle-border {
      border: 1px solid rgba(255, 158, 128, 0.3);
    }

    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .tab-item i {
      width: 24px;
      height: 24px;
      transition: all 0.2s ease;
    }

    .tab-item.active {
      color: var(--color-accent);
      transform: translateY(-2px);
    }

/* 调整模块卡片尺寸，使其更大 */
.module-card {
  background: var(--color-card);
  border-radius: 20px;
  padding: 1.75rem; /* 从1.5rem增加到1.75rem */
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 111, 67, 0.08);
  height: auto; /* 确保高度自适应 */
  min-height: 140px; /* 设置最小高度 */
}

    .module-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(255, 111, 67, 0.15);
    }

    .input-field {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 158, 128, 0.4);
      border-radius: 14px;
      padding: 0.75rem 1rem;
      transition: all 0.3s ease;
      width: 100%;
      box-sizing: border-box;
    }

    .input-field:focus {
      border-color: var(--color-accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
    }

    .stat-card {
      background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
      border-radius: 16px;
      padding: 1rem;
      text-align: center;
    }

    .temperature-bar {
      height: 10px;
      background: #FFCCBC;
      border-radius: 10px;
      overflow: hidden;
    }

    .temperature-fill {
      height: 100%;
      background: linear-gradient(90deg, #FFB74D 0%, #FF7043 100%);
      width: 0%;
      transition: width 0.8s ease;
      border-radius: 10px;
    }

    .hidden {
      display: none;
    }

    .power-saving-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 236, 179, 0.95);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      color: var(--color-text);
    }

    .chain-node {
      position: relative;
      padding-left: 2.5rem;
    }

    .chain-node:before {
      content: '';
      position: absolute;
      left: 1.2rem;
      top: 0;
      bottom: 0;
      width: 2px;
      background-color: #FFCCBC;
    }

    .chain-node:first-child:before {
      top: 50%;
    }

    .chain-node:last-child:before {
      bottom: 50%;
    }

    .chain-node:after {
      content: '';
      position: absolute;
      left: 0.9rem;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: var(--color-accent);
      box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.2);
    }

    .warm-button {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
      color: white;
      border-radius: 50px;
      padding: 0.75rem 1.5rem;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(255, 111, 67, 0.3);
      width: 50%;
      border: none;
      cursor: pointer;
    }

    .warm-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.4);
    }

    .warm-button:active {
      transform: translateY(0);
    }

    .emergency-card {
      background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
      border-radius: 16px;
      padding: 1.25rem;
      transition: all 0.3s ease;
      margin-bottom: 1rem;
    }

    .emergency-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.15);
    }

    .floating-element {
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }

    .pulse {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    .fade-in {
      animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .hand-drawn {
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    }

    .sticker {
      background: var(--color-card);
      border: 2px dashed var(--color-primary);
      border-radius: 16px;
      padding: 1rem;
      transform: rotate(-2deg);
    }

    .item-card {
      background: white;
      border-radius: 16px;
      padding: 1.25rem;
      margin-bottom: 1rem;
      box-shadow: 0 4px 12px rgba(255, 111, 67, 0.08);
      transition: all 0.3s ease;
    }

    .item-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.12);
    }

    .add-button {
      position: fixed;
      bottom: 5rem;
      right: 1.5rem;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.3);
      z-index: 20;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .add-button:hover {
      transform: scale(1.1) rotate(90deg);
    }

    .contact-card {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 158, 128, 0.1);
    }

    .contact-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #FFECB3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .contact-info {
      flex: 1;
    }

    .contact-name {
      font-weight: 500;
      color: var(--color-text);
      margin-bottom: 4px;
    }

    .contact-details {
      font-size: 0.85rem;
      color: var(--color-text-light);
      display: flex;
      gap: 8px;
    }

    .contact-relation {
      background: #FFF3E0;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 0.75rem;
    }

    .empty-state {
      text-align: center;
      padding: 3rem 1rem;
      color: var(--color-text-light);
    }

    .empty-state i {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: var(--color-secondary);
    }

    .empty-state-title {
      font-weight: 500;
      margin-bottom: 0.5rem;
      color: var(--color-text);
    }

    .empty-state-description {
      margin-bottom: 1.5rem;
      font-size: 0.9rem;
    }

    .container {
      max-width: 640px;
      margin: 0 auto;
    }

    .temperature-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-accent);
      text-align: center;
      margin-bottom: 0.5rem;
    }

    .temperature-label {
      font-size: 0.75rem;
      color: var(--color-text-light);
      text-align: center;
    }

    .temp-chart {
      height: 20px;
      background: #FFECB3;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 0.5rem;
    }

    .temp-fill {
      height: 100%;
      background: linear-gradient(90deg, #FFB74D 0%, #FF7043 100%);
      width: 0%;
      transition: width 1s ease;
    }

    .chat-bubble {
      position: relative;
      background: #FFF;
      border-radius: 18px;
      padding: 12px 16px;
      max-width: 80%;
      margin: 8px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      word-break: break-word;
    }

    .chat-bubble:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -10px;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-right-color: #FFF;
    }

    .chain-node-container {
      position: relative;
      padding-left: 2rem;
      margin-bottom: 1.5rem;
    }

    .chain-node-container:last-child {
      margin-bottom: 0;
    }

    .chain-node-dot {
      position: absolute;
      left: -0.65rem;
      top: 0.2rem;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--color-accent);
      border: 2px solid white;
      box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.2);
    }

    .chain-line {
      position: absolute;
      left: -0.5rem;
      top: 1.2rem;
      width: 2px;
      height: 100%;
      background: #FFCCBC;
    }

    .chain-line-top {
      top: 0;
      height: 50%;
    }

    .chain-line-bottom {
      top: 1.2rem;
      height: calc(100% - 1.2rem);
    }

    .gratitude-item {
      background: #FFF9F5;
      border: 1px solid #FFD0A0;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .affirmation-item {
      background: #FFF3E0;
      border: 1px solid #FFCCBC;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .philosophy-item {
      background: #F0F8FF;
      border: 1px solid #D6EAF8;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .contact-item {
      background: #E8F5E9;
      border: 1px solid #C8E6C9;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .date-badge {
      background: #FFECB3;
      color: #5D4037;
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 10px;
      margin-top: 4px;
      display: inline-block;
    }

    /* 增强型情感急救卡片 */
    .emergency-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 1.5rem;
    }

    .emergency-item {
      background: linear-gradient(135deg, #FFF9F5 0%, #FFF3E0 100%);
      border-radius: 16px;
      padding: 1rem;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .emergency-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(255, 111, 67, 0.15);
    }

    .emergency-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--color-accent);
    }

    .emergency-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .gratitude-icon {
      background: #E8F5E9;
      color: #66BB6A;
    }

    .affirmation-icon {
      background: #FFF3E0;
      color: #FFA726;
    }

    .philosophy-icon {
      background: #E3F2FD;
      color: #42A5F5;
    }

    .contact-icon {
      background: #FCE4EC;
      color: #EC407A;
    }

    .emergency-title {
      font-weight: 500;
      font-size: 0.95rem;
      color: var(--color-text);
      margin-bottom: 4px;
    }

    .emergency-description {
      font-size: 0.75rem;
      color: var(--color-text-light);
    }

    /* 链条详情页样式 */
    .chain-title {
      font: 1.3rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.5rem;
    }

    .chain-subtitle {
      font-size: 0.9rem;
      color: var(--color-text-light);
      margin-bottom: 1.5rem;
    }

    .chain-progress {
      background: #FFF9F5;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 1.5rem;
      text-align: center;
    }

    .chain-progress-value {
      font-weight: 600;
      color: var(--color-accent);
      font-size: 1.1rem;
      margin: 8px 0;
    }

    .chain-progress-bar {
      height: 8px;
      background: #FFECB3;
      border-radius: 4px;
      overflow: hidden;
    }

    .chain-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #FFB74D 0%, #FF7043 100%);
      width: 0%;
      transition: width 0.5s ease;
    }

    /* 添加温度计显示 */
    .temperature-display {
      text-align: center;
      padding: 1.5rem;
      background: #FFF9F5;
      border-radius: 16px;
      margin: 1rem 0;
    }

    .temperature-number {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-accent);
    }

    .temperature-label {
      font-size: 0.9rem;
      color: var(--color-text-light);
      margin-top: 0.5rem;
    }

    /* 联系人页面特殊样式 */
    .contact-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    .contact-actions {
      display: flex;
      gap: 8px;
    }

    /* 联系人卡片样式 */
    .contact-card {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 158, 128, 0.1);
    }

    .contact-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #FFECB3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .contact-info {
      flex: 1;
    }

    .contact-name {
      font-weight: 500;
      color: var(--color-text);
      margin-bottom: 4px;
    }

    .contact-details {
      font-size: 0.85rem;
      color: var(--color-text-light);
      display: flex;
      gap: 8px;
    }

    .contact-relation {
      background: #FFF3E0;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 0.75rem;
    }

    /* 个人中心样式 */
    .user-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 1.5rem;
    }

    .user-stat {
      background: #FFF9F5;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
    }

    .stat-number {
      font-weight: 700;
      color: var(--color-accent);
      font-size: 1.2rem;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--color-text-light);
    }

    /* 新增动画效果 */
    @keyframes glow {
      0% { box-shadow: 0 0 5px rgba(255, 111, 67, 0.3); }
      50% { box-shadow: 0 0 20px rgba(255, 111, 67, 0.6); }
      100% { box-shadow: 0 0 5px rgba(255, 111, 67, 0.3); }
    }

    .glow {
      animation: glow 2s infinite;
    }

    /* 加载动画 */
    .loading {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 111, 67, 0.3);
      border-radius: 50%;
      border-top-color: var(--color-accent);
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* 通知样式 */
    .notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #4CAF50;
      color: white;
      padding: 10px 20px;
      border-radius: 20px;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .notification.show {
      opacity: 1;
    }

    /* 新增情感急救引导 */
    .emotional-emergency {
      background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
      border-radius: 16px;
      padding: 1.25rem;
      margin-top: 1rem;
      position: relative;
      overflow: hidden;
    }

    .emotional-emergency::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 100px;
      height: 100px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15c18.787 0 34 15.213 34 34 0 7.33-2.327 14.084-6.223 19.536C74.827 75.227 71.666 82.47 66.638 88H33.362C28.334 82.47 25.173 75.227 22.223 68.536 18.327 63.084 16 56.33 16 49c0-18.787 15.213-34 34-34z' fill='%23FFECB3'/%3E%3C/svg%3E") no-repeat;
      background-size: cover;
      opacity: 0.3;
    }

    .emergency-title {
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .emergency-title i {
      color: var(--color-accent);
    }

    .emergency-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 1rem;
    }

    .emergency-action {
      background: white;
      border: 1px solid #FFD0A0;
      border-radius: 12px;
      padding: 10px;
      text-align: center;
      transition: all 0.2s;
    }

    .emergency-action:hover {
      transform: translateY(-2px);
      background: #FFF3E0;
    }

    .emergency-action i {
      font-size: 1.2rem;
      color: var(--color-accent);
      margin-bottom: 4px;
    }

    .emergency-action-text {
      font-size: 0.85rem;
      color: var(--color-text);
    }

    /* 新增感恩练习样式 */
    .gratitude-container {
      background: #FFF9F5;
      border-radius: 16px;
      padding: 1.25rem;
      margin-top: 1rem;
    }

    .gratitude-title {
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 0.5rem;
    }

    .gratitude-list {
      margin-top: 1rem;
    }

    .gratitude-item {
      background: white;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
      border-left: 3px solid var(--color-primary);
    }

    /* 善意传递详情页样式 */
    .chain-item {
      background: white;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }

    .chain-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--color-accent);
    }

/* 调整传递链卡片尺寸，使其更大 */
.chain-card {
  border-radius: 20px; /* 从16px增加到20px */
  background: var(--color-card);
  box-shadow: 0 4px 15px rgba(255, 111, 67, 0.1); /* 增强阴影 */
  transition: all 0.3s ease;
  padding: 1.75rem; /* 增加内边距 */
  margin-bottom: 18px; /* 从16px增加到18px */
}

    .chain-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #FFECB3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .chain-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }

    .chain-name {
      font-weight: 500;
      color: var(--color-text);
      margin-right: 8px;
    }

    .chain-sequence {
      background: #FFECB3;
      color: var(--color-text);
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
    }

    .chain-content {
      color: var(--color-text);
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .chain-time {
      font-size: 0.75rem;
      color: var(--color-text-light);
      text-align: right;
    }

.sentence-card {
  border-radius: 20px; /* 从16px增加到20px */
  background: var(--color-card);
  box-shadow: 0 4px 15px rgba(255, 111, 67, 0.1); /* 增强阴影 */
  transition: all 0.3s ease;
  padding: 1.75rem; /* 增加内边距 */
  margin-bottom: 18px; /* 从16px增加到18px */
}

    .sentence-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .sentence-content {
      font-style: italic;
      color: var(--color-text);
      margin-bottom: 12px;
      line-height: 1.6;
    }

    .sentence-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-text-light);
      font-size: 0.8rem;
    }

    .sentence-category {
      background: #FFECB3;
      color: var(--color-text);
      padding: 2px 8px;
      border-radius: 10px;
    }

    /* 完成传递链的庆祝动画 */
    .celebration {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      visibility: hidden;
    }

    .celebration.show {
      visibility: visible;
    }

    .celebration-content {
      text-align: center;
      max-width: 80%;
    }

    .celebration-icon {
      font-size: 4rem;
      color: var(--color-accent);
      margin-bottom: 1rem;
      animation: pulse 1.5s infinite;
    }

    .celebration-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.5rem;
    }

    .celebration-message {
      font-size: 1.1rem;
      color: var(--color-text-light);
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

    .certificate {
      background: #FFF9F5;
      border: 1px solid #FFD0A0;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .certificate-title {
      font-weight: 700;
      color: var(--color-text);
      text-align: center;
      margin-bottom: 10px;
      font-size: 1.2rem;
    }

    .certificate-content {
      text-align: center;
      font-style: italic;
      color: var(--color-text);
      line-height: 1.6;
    }

    .celebration-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 300px;
    }

    .celebration-button {
      padding: 12px;
      border-radius: 10px;
      text-align: center;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .celebration-button.primary {
      background: var(--color-primary);
      color: white;
    }

    .celebration-button.secondary {
      background: #FFF9F5;
      color: var(--color-text);
      border: 1px solid #FFD0A0;
    }

    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar {
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #FF9E80;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #FF7043;
    }

    /* 添加时间选择器样式 */
    .datetime-local {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 158, 128, 0.4);
      border-radius: 14px;
      padding: 0.75rem 1rem;
      transition: all 0.3s ease;
      width: 100%;
      box-sizing: border-box;
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--color-text);
    }

    .datetime-local:focus {
      border-color: var(--color-accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
    }

    /* 修复日期选择器文字颜色 */
    .datetime-local::-webkit-datetime-edit {
      color: var(--color-text);
    }

    .datetime-local::-webkit-datetime-edit-fields-wrapper {
      color: var(--color-text);
    }

    .datetime-local::-webkit-datetime-edit-text {
      color: var(--color-text);
    }

    .datetime-local::-webkit-datetime-edit-month-field {
      color: var(--color-text);
    }

    .datetime-local::-webkit-datetime-edit-day-field {
      color: var(--color-text);
    }

    .datetime-local::-webkit-datetime-edit-year-field {
      color: var(--color-text);
    }

    /* 修复iOS日期选择器样式 */
    @media (pointer: coarse) {
      .datetime-local {
        padding: 12px 16px;
      }
    }

    /* 添加输入字段下划线动画 */
    .input-field-wrapper {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .input-field {
      padding-right: 40px;
    }

    .input-clear {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-text-light);
      cursor: pointer;
      display: none;
    }

    .input-field:focus + .input-clear {
      display: block;
    }

    /* 个人中心统计图表 */
    .stat-chart {
      height: 100px;
      margin-top: 1rem;
    }

    /* 情感急救卡片更多样式 */
    .emotional-emergency-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 1rem;
    }

    .emotional-emergency-item {
      background: white;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: 1px solid #FFD0A0;
      transition: all 0.2s;
    }

    .emotional-emergency-item:hover {
      transform: translateY(-2px);
      background #FFF9F5;
    }

    .emotional-emergency-icon {
      font-size: 1.5rem;
      color: var(--color-accent);
      margin-bottom: 8px;
    }

    .emotional-emergency-title {
      font-weight: 500;
      font-size: 0.85rem;
      color: var(--color-text);
    }

    /* 新增情感急救操作卡片 */
    .emergency-action-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .action-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .action-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-warm);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 1.2rem;
    }

    .action-title {
      font-weight: 600;
      color: var(--color-text);
    }

    .action-description {
      color: var(--color-text-light);
      font-size: 0.9rem;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .action-input {
      width: 100%;
      margin-bottom: 15px;
      padding: 12px 15px;
      border: 1px solid rgba(255, 158, 128, 0.3);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.8);
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--color-text);
    }

    .action-input:focus {
      border-color: var(--color-accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
    }

    .action-button {
      width: 100%;
      background: var(--color-primary);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .action-button:hover {
      background: var(--color-accent);
      transform: translateY(-2px);
    }

    .action-link {
      display: block;
      text-align: center;
      color: var(--color-accent);
      margin-top: 15px;
      font-weight: 500;
    }

    /* 联系人列表样式 */
    .contact-list {
      margin-top: 15px;
    }

    .contact {
      background: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      border-left: 3px solid var(--color-primary);
    }

    .contact-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: var(--color-warm);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .contact-details {
      flex: 1;
    }

    .contact-name {
      font-weight: 600;
      margin-bottom: 4px;
    }

    .contact-info {
      color: var(--color-text-light);
      font-size: 0.85rem;
      display: flex;
      gap: 10px;
    }

    .contact-relation {
      background: #FFF3E0;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 0.75rem;
    }

    /* 新增情感急救详情页 */
    .emotional-emergency-detail {
      background: white;
      border-radius: 16px;
      padding: 20px;
      margin-top: 15px;
    }

    .emergency-detail-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 15px;
    }

    .emergency-detail-content {
      line-height: 1.6;
      color: var(--color-text);
      margin-bottom: 20px;
    }

    .emergency-detail-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .emergency-detail-button {
      padding: 12px;
      border-radius: 10px;
      text-align: center;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
    }

    .emergency-detail-button.primary {
      background: var(--color-primary);
      color: white;
    }

    /* 添加呼吸动画到呼吸卡片 */
    .breathing-card {
      animation: breathe 4s ease-in-out infinite;
    }

    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    /* 添加温度计动画 */
    @keyframes fill-temperature {
      from { width: 0%; }
      to { width: 100%; }
    }

    /* 添加标题动画 */
    .page-title {
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
    }

    .page-title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 40px;
      height: 3px;
      background: var(--color-primary);
      border-radius: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .page-title:hover::after {
      transform: scaleX(1);
    }

    /* 添加情感急救卡片动画 */
    .emergency-item {
      transition: all 0.3s ease;
    }

    .emergency-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(255, 111, 67, 0.15);
    }

    /* 添加加载状态 */
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 111, 67, 0.3);
      border-top: 3px solid var(--color-accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    }

    /* 添加空状态样式 */
    .empty-state {
      text-align: center;
      padding: 30px 20px;
      color: var(--color-text-light);
    }

    .empty-state-icon {
      font-size: 3rem;
      margin-bottom: 15px;
      color: var(--color-secondary);
    }

    .empty-state-title {
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--color-text);
      margin-bottom: 10px;
    }

    .empty-state-description {
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .empty-state-button {
      background: var(--color-primary);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .empty-state-button:hover {
      background: var(--color-accent);
      transform: translateY(-2px);
    }

    /* 修复iPhone X系列底部间距问题 */
    @media (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
      body {
        padding-bottom: 34px;
      }
    }

    /* 优化标题栏中的按钮样式 */
    #capsule-list-page .warm-button,
    #chain-list-page .warm-button,
    #sentence-list-page .warm-button {
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(255, 111, 67, 0.2);
      min-width: 110px;
      padding: 0.6rem 1rem;
      font-size: 0.875rem;
    }

    #capsule-list-page .warm-button:hover,
    #chain-list-page .warm-button:hover,
    #sentence-list-page .warm-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(255, 111, 67, 0.25);
    }
  </style>
</head>
<body class="min-h-screen pb-24 bg-gradient-to-b from-[#FFF9F5] to-[#FFECB3]/30">
<main id="home-page" class="px-5 py-6 space-y-8 fade-in">
  <div class="text-center">
    <div class="warm-gradient w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4 soft-shadow pulse">
      <i class="fas fa-moon text-2xl text-white"></i>
    </div>
    <h2 class="text-2xl font-bold text-[#5D4037] mb-2">风里已经有了温柔的味道</h2>
    <p class="text-[#8D6E63] text-sm">今天想写下什么？我在这里静静听着</p>
  </div>

  <div class="grid grid-cols-2 gap-4">
    <div class="module-card flex flex-col items-center cursor-pointer group" onclick="showPage('capsule-list-page')">
      <div class="w-16 h-16 rounded-full bg-[#FFF3E0] flex items-center justify-center mb-3 group-hover:bg-[#FFE0B2] transition-colors">
        <i class="fas fa-archive text-[#FF7043] text-xl"></i>
      </div>
      <h3 class="font-medium text-[#5D4037] text-center">时光胶囊</h3>
      <p class="text-xs text-[#8D6E63] mt-1 text-center">写给未来的温暖</p>
    </div>

    <div class="module-card flex flex-col items-center cursor-pointer group" onclick="showPage('sentence-list-page')">
      <div class="w-16 h-16 rounded-full bg-[#FFF3E0] flex items-center justify-center mb-3 group-hover:bg-[#FFE0B2] transition-colors">
        <i class="fas fa-heart text-[#FF7043] text-xl"></i>
      </div>
      <h3 class="font-medium text-[#5D4037] text-center">暖意罐</h3>
      <p class="text-xs text-[#8D6E63] mt-1 text-center">收藏治愈能量</p>
    </div>

    <div class="module-card flex flex-col items-center cursor-pointer group" onclick="showPage('chain-list-page')">
      <div class="w-16 h-16 rounded-full bg-[#FFF3E0] flex items-center justify-center mb-3 group-hover:bg-[#FFE0B2] transition-colors">
        <i class="fas fa-hands-helping text-[#FF7043] text-xl"></i>
      </div>
      <h3 class="font-medium text-[#5D4037] text-center">善意传递</h3>
      <p class="text-xs text-[#8D6E63] mt-1 text-center">温暖接力传递</p>
    </div>

    <div class="module-card flex flex-col items-center cursor-pointer group" onclick="showPage('user-profile-page')">
      <div class="w-16 h-16 rounded-full bg-[#FFF3E0] flex items-center justify-center mb-3 group-hover:bg-[#FFE0B2] transition-colors">
        <i class="fas fa-user-circle text-[#FF7043] text-xl"></i>
      </div>
      <h3 class="font-medium text-[#5D4037] text-center">个人中心</h3>
      <p class="text-xs text-[#8D6E63] mt-1 text-center">我的温暖空间</p>
    </div>
  </div>

  <!-- 情感急救模块 -->
  <div class="bg-white/80 rounded-2xl p-5 soft-shadow">
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-semibold text-[#5D4037] flex items-center">
        <i class="fas fa-first-aid text-[#FF7043] mr-2"></i>情感急救
      </h3>
      <a href="#" class="text-[#FF7043] text-sm"></a>
    </div>
    <div class="emergency-grid">
      <div class="emergency-item" onclick="showPage('gratitude-list-page')">
        <div class="emergency-icon gratitude-icon">
          <i class="fas fa-hands-praying"></i>
        </div>
        <div class="emergency-title">感恩练习</div>
        <div class="emergency-description">记录感恩时刻</div>
      </div>

      <div class="emergency-item" onclick="showPage('affirmations-list-page')">
        <div class="emergency-icon affirmation-icon">
          <i class="fas fa-comment-dots"></i>
        </div>
        <div class="emergency-title">积极肯定语</div>
        <div class="emergency-description">正向自我激励</div>
      </div>

      <div class="emergency-item" onclick="showPage('philosophy-list-page')">
        <div class="emergency-icon philosophy-icon">
          <i class="fas fa-lightbulb"></i>
        </div>
        <div class="emergency-title">处世哲学</div>
        <div class="emergency-description">人生准则与信念</div>
      </div>

      <div class="emergency-item" onclick="showPage('contacts-list-page')">
        <div class="emergency-icon contact-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="emergency-title">可联系的人</div>
        <div class="emergency-description">支持网络</div>
      </div>
    </div>
  </div>

  <div>
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-semibold text-[#5D4037]">最近活动</h3>

    </div>
    <div class="space-y-3" id="recent-activities">
      <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
        <div class="flex justify-between items-center">
          <p class="text-sm text-[#8D6E63]" id="loading-text">加载中...</p>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-3 gap-3">
    <div class="stat-card hand-drawn">
      <div class="text-lg font-bold text-[#FF7043]" id="capsule-count">0</div>
      <div class="text-xs text-[#8D6E63] mt-1">胶囊</div>
    </div>
    <div class="stat-card hand-drawn">
      <div class="text-lg font-bold text-[#FF7043]" id="sentence-count">0</div>
      <div class="text-xs text-[#8D6E63] mt-1"></div>
    </div>
    <div class="stat-card hand-drawn">
      <div class="text-lg font-bold text-[#FF7043]" id="chain-count">0</div>
      <div class="text-xs text-[#8D6E63] mt-1">传递</div>
    </div>
  </div>
</main>

<nav class="fixed bottom-0 left-0 right-0 bg-white/90 border-t border-[#FFE0B2] backdrop-blur-sm z-10 py-2">
  <div class="grid grid-cols-4">
    <a href="#" class="tab-item active text-[#FF7043]" onclick="showPage('home-page')">
      <i class="fas fa-home"></i>
      <span class="text-xs">首页</span>
    </a>
    <a href="#" class="tab-item text-[#8D6E63]" onclick="showPage('capsule-list-page')">
      <i class="fas fa-archive"></i>
      <span class="text-xs">胶囊</span>
    </a>
    <a href="#" class="tab-item text-[#8D6E63]" onclick="showPage('sentence-list-page')">
      <i class="fas fa-heart"></i>
      <span class="text-xs">暖意</span>
    </a>
    <a href="#" class="tab-item text-[#8D6E63]" onclick="showPage('user-profile-page')">
      <i class="fas fa-user"></i>
      <span class="text-xs">我的</span>
    </a>
  </div>
</nav>

<!-- 情感急救功能页面 -->
<div id="gratitude-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">感恩练习</h2>
    <div class="w-10"></div>
  </div>

  <div id="gratitude-list" class="mb-20">
    <div class="loading-state hidden" id="gratitude-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    <div class="empty-state hidden" id="gratitude-empty">
      <div class="empty-icon">
        <i class="fas fa-pray"></i>
      </div>
      <div class="empty-state-title">暂无感恩记录</div>
      <div class="empty-state-description">生活中的小确幸值得被记录，写下今天让你感恩的人或事</div>
      <button class="empty-state-button" onclick="showPage('create-gratitude-page')">添加感恩记录</button>
    </div>
  </div>

  <div class="add-button" onclick="showPage('create-gratitude-page')">
    <i class="fas fa-plus text-xl"></i>
  </div>
</div>

<div id="create-gratitude-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('gratitude-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">记录感恩</h2>
    <div class="w-10"></div>
  </div>

  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">感恩事项</label>
      <textarea id="gratitude-content" class="input-field w-full p-2 rounded-lg h-32" placeholder="今天有什么让你感恩的人或事..."></textarea>
    </div>
    <div class="pt-4">
      <button onclick="createGratitude()" class="warm-button w-full">保存感恩记录</button>
    </div>
  </div>
</div>

<div id="affirmations-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">积极肯定语</h2>
    <div class="w-10"></div>
  </div>

  <div id="affirmations-list" class="mb-20">
    <div class="loading-state hidden" id="affirmations-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    <div class="empty-state hidden" id="affirmation-empty">
      <div class="empty-state-icon">
        <i class="fas fa-bullhorn"></i>
      </div>
      <div class="empty-state-title">暂无肯定语</div>
      <div class="empty-state-description">用正向语言给自己力量，写下鼓励自己的话语</div>
      <button class="empty-state-button" onclick="showPage('create-affirmation-page')">添加肯定语</button>
    </div>
  </div>

  <div class="add-button" onclick="showPage('create-affirmation-page')">
    <i class="fas fa-plus text-xl"></i>
  </div>
</div>

<div id="create-affirmation-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('affirmations-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">添加肯定语</h2>
    <div class="w-10"></div>
  </div>

  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">肯定语内容</label>
      <textarea id="affirmation-content" class="input-field w-full p-2 rounded-lg h-32" placeholder="写下鼓励自己的话语..."></textarea>
    </div>
    <div class="pt-4">
      <button onclick="createAffirmation()" class="warm-button w-full">保存肯定语</button>
    </div>
  </div>
</div>

<div id="philosophy-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">处世哲学</h2>
    <div class="w-10"></div>
  </div>

  <div id="philosophy-list" class="mb-20">
    <div class="loading-state hidden" id="philosophy-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    <div class="empty-state hidden" id="philosophy-empty">
      <div class="empty-state-icon">
        <i class="fas fa-brain"></i>
      </div>
      <div class="empty-state-title">暂无处世哲学</div>
      <div class="empty-state-description">记录下你的人生准则和信念，让它们成为你的精神支柱</div>
      <button class="empty-state-button" onclick="showPage('create-philosophy-page')">添加处世哲学</button>
    </div>
  </div>

  <div class="add-button" onclick="showPage('create-philosophy-page')">
    <i class="fas fa-plus text-xl"></i>
  </div>
</div>

<div id="create-philosophy-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('philosophy-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">添加处世哲学</h2>
    <div class="w-10"></div>
  </div>

  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">哲学内容</label>
      <textarea id="philosophy-content" class="input-field w-full p-2 rounded-lg h-32" placeholder="写下你的人生准则和信念..."></textarea>
    </div>
    <div class="pt-4">
      <button onclick="createPhilosophy()" class="warm-button w-full">保存哲学</button>
    </div>
  </div>
</div>

<div id="contacts-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">可联系的人</h2>
    <div class="w-10"></div>
  </div>

  <div id="contacts-list" class="mb-20">
    <div class="loading-state hidden" id="contacts-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    <div class="empty-state hidden" id="contact-empty">
      <div class="empty-state-icon">
        <i class="fas fa-users"></i>
      </div>
      <div class="empty-state-title">暂无联系人</div>
      <div class="empty-state-description">添加可以倾诉的人，他们是你情感的支持网络</div>
      <button class="empty-state-button" onclick="showPage('create-contact-page')">添加联系人</button>
    </div>
  </div>

  <div class="add-button" onclick="showPage('create-contact-page')">
    <i class="fas fa-plus text-xl"></i>
  </div>
</div>

<div id="create-contact-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('contacts-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">添加联系人</h2>
    <div class="w-10"></div>
  </div>

  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">联系人姓名</label>
      <input type="text" id="contact-name" class="input-field w-full p-2 rounded-lg" placeholder="输入联系人姓名">
    </div>
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">联系方式</label>
      <input type="text" id="contact-info" class="input-field w-full p-2 rounded-lg" placeholder="电话/微信/其他联系方式">
    </div>
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">关系/备注</label>
      <input type="text" id="contact-relation" class="input-field w-full p-2 rounded-lg" placeholder="你们的关系或备注">
    </div>
    <div class="pt-4">
      <button onclick="createContact()" class="warm-button w-full">保存联系人</button>
    </div>
  </div>
</div>
<div id="capsule-detail-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('capsule-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">胶囊详情</h2>
    <div></div>
  </div>

  <div id="capsule-detail-content" class="space-y-4">
    <div class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 修正: 使用一致的ID -->
    <div id="capsule-image-container" class="hidden">
      <div class="mb-4">
        <img id="capsule-images" class="w-full h-64 object-cover rounded-xl" src="" alt="胶囊图片">
      </div>
    </div>

    <div id="capsule-content-container">
      <!-- 内容将在这里动态生成 -->
    </div>
  </div>
</div>
<!-- 修改时光胶囊列表页面标题栏 -->
<div id="capsule-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">藏在光里的你</h2>
    <button onclick="showPage('create-capsule-page')" class="warm-button">新建时光胶囊</button>
  </div>
  <div id="capsule-list" class="space-y-4">
    <div class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</div>

<div id="create-capsule-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('capsule-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">创建胶囊</h2>
    <div></div>
  </div>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">标题</label>
      <input type="text" id="capsule-title" class="input-field w-full p-2 rounded-lg" placeholder="给未来的自己写点什么...">
    </div>
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">内容</label>
      <textarea id="capsule-content" class="input-field w-full p-2 rounded-lg h-32" placeholder="写下你想说的话..."></textarea>
    </div>
    <!-- 新增：接收人信息 -->
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">发给谁（可选）</label>
      <input type="text" id="capsule-recipient" class="input-field w-full p-2 rounded-lg" placeholder="输入接收人姓名">
    </div>
    <!-- 新增：图片上传 -->
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">添加图片（可选）</label>
      <input type="file" id="capsule-image" accept="image/*" class="input-field" onchange="previewImage(this)">
      <div id="image-preview" class="mt-2 hidden">
        <img id="preview-img" class="max-h-40 rounded-lg" />
      </div>
    </div>
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">解锁时间</label>
      <input type="datetime-local" id="capsule-unlock-time" class="input-field w-full p-2 rounded-lg" min="">
    </div>
    <div class="pt-4">
      <button onclick="createCapsule()" class="warm-button w-full">创建胶囊</button>
    </div>
  </div>
</div>

<!-- 修改善意传递列表页面标题栏 -->
<div id="chain-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">一朵云推动另一朵</h2>
    <button onclick="showPage('create-chain-page')" class="warm-button">新建善意传递</button>
  </div>
  <div id="chain-list" class="space-y-4">
    <div class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</div>

<div id="create-chain-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('chain-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">启动传递链</h2>
    <div></div>
  </div>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">选择已解锁的时光胶囊</label>
      <select id="chain-capsule" class="input-field w-full p-2 rounded-lg">
        <option value="">选择时光胶囊</option>
      </select>
    </div>
    <div class="pt-4">
      <button onclick="startChain()" class="warm-button w-full">启动传递链</button>
    </div>
  </div>
</div>

<!-- 修改暖意罐列表页面标题栏 -->
<div id="sentence-list-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">像春天一样柔软</h2>
    <button onclick="showPage('create-sentence-page')" class="warm-button">新建丝缕暖意</button>
  </div>
  <div id="sentence-list" class="space-y-4">
    <div class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</div>

<div id="create-sentence-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('sentence-list-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/80 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">收藏句子</h2>
    <div></div>
  </div>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-[#5D4037] mb-1">句子内容</label>
      <textarea id="sentence-content" class="input-field w-full p-2 rounded-lg h-32" placeholder="写下或粘贴你想收藏的温暖句子..."></textarea>
    </div>
    <div class="pt-4">
      <button onclick="createSentence()" class="warm-button w-full">收藏句子</button>
    </div>
  </div>
</div>

<div id="user-profile-page" class="hidden px-5 py-6">
  <div class="flex items-center justify-between mb-6">
    <button onclick="showPage('home-page')" class="text-[#8D6E63] p-2 rounded-full bg-white/8 soft-shadow"><i class="fas fa-arrow-left"></i></button>
    <h2 class="text-2xl font-bold text-[#5D4037]">个人中心</h2>
    <button onclick="logoutUser()" class="text-red-500 text-sm">退出登录</button>
  </div>
  <div class="bg-white/80 rounded-2xl p-4 mb-6 soft-shadow">
    <div class="flex items-center gap-4">
      <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
        <i class="fas fa-user text-blue-400 text-2xl"></i>
      </div>
      <div>
        <h3 id="user-name" class="font-medium text-[#5D4037]">萤窗用户</h3>
        <p class="text-sm text-[#8D6E63]">温暖足迹</p>
      </div>
    </div>
  </div>
  <div class="space-y-3">
    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#5D4037]">最近活跃</span>
        <span id="last-active" class="text-sm text-[#8D6E63]">2023-06-15</span>
      </div>
    </div>
    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#54037]">温暖温度</span>
        <span id="user-temperature" class="text-sm text-[#FF7043]">36.5℃</span>
      </div>
      <div class="mt-2">
        <div class="temperature-bar">
          <div class="temperature-fill" id="temperature-fill" style="width: 65%"></div>
        </div>
      </div>
    </div>
    <div class="bg-white/80-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#5D4037]">情感急救</span>
        <button class="text-[#FF7043] text-sm">查看</button>
      </div>
    </div>
    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#5D4037]">时光胶囊</span>
        <span id="capsule-count-profile" class="text-sm text-[#FF7043]">3</span>
      </div>
    </div>
    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#5D4037]">暖意罐</span>
        <span id="sentence-count-profile" class="text-sm text-[#FF7043]">5</span>
      </div>
    </div>
    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
      <div class="flex items-center justify-between">
        <span class="text-[#5D4037]">善意传递</span>
        <span id="chain-count-profile" class="text-sm text-[#FF7043]">2</span>
      </div>
    </div>
  </div>
</div>

<div id="loading-overlay" class="hidden power-saving-overlay">
  <div class="text-center">
    <div class="text-4xl mb-4">✨</div>
    <p class="text-lg">温暖正在加载中...</p>
  </div>
</div>

<div id="error-toast" class="hidden fixed top-20 left-1/2 transform -translate-x-1/2 bg-red-100 text-red-800 px-4 py-3 rounded-lg shadow-lg z-50">
  <div class="flex items-center">
    <i class="fas fa-exclamation mr-2"></i>
    <span id="error-message">未知错误</span>
  </div>
</div>

<div id="celebration-overlay" class="celebration">
  <div class="celebration-content">
    <div class="celebration-icon">🎉</div>
    <h2 class="celebration-title">传递链完成！</h2>
    <p class="celebration-message">5位伙伴共同创造了温暖奇迹，让世界多了一份温柔</p>
    <div class="certificate">
      <div class="certificate-title">温暖认证</div>
      <div class="certificate-content">感谢您参与善意传递链，您和4位伙伴共同创造了45℃的温暖奇迹，这将是世界变得更加温柔的一小步。</div>
    </div>
    <div class="celebration-actions">
      <div class="celebration-button primary" onclick="closeCelebration()">继续探索</div>
      <div class="celebration-button secondary" onclick="shareCelebration()">分享给朋友</div>
    </div>
  </div>
</div>

<script>
    // 全局用户ID（实际应用中应该从登录获取）
    let currentUserId = 1;
    let currentChain = null;

    // 显示通知
    function showToast(message, type = 'info') {
        const toast = document.getElementById('error-toast');
        const msg = document.getElementById('error-message');
        msg.textContent = message;

        if (type === 'error') {
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-red-100 text-red-800 px-4 py-3 rounded-lg shadow-lg z-50';
        } else if (type === 'success') {
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-100 text-green-800 px-4 py-3 rounded-lg shadow-lg z-50';
        } else {
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-blue-100 text-blue-800 px-4 py-3 rounded-lg shadow-lg z-50';
        }

        toast.classList.remove('hidden');
        setTimeout(() => { toast.classList.add('hidden'); }, 3000);
    }
function previewImage(input) {
  const preview = document.getElementById('image-preview');
  const img = document.getElementById('preview-img');
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = function(e) {
      img.src = e.target.result;
      preview.classList.remove('hidden');
    };
    reader.readAsDataURL(input.files[0]);
  }
}
    // 显示加载遮罩
    function showLoading(show) {
        document.getElementById('loading-overlay').classList.toggle('hidden', !show);
    }

    // 页面切换函数
    function showPage(pageId) {
        const allPages = [
            'home-page', 'capsule-list-page', 'create-capsule-page',
            'chain-list-page', 'create-chain-page',
            'sentence-list-page', 'create-sentence-page',
            'user-profile-page', 'gratitude-list-page', 'create-gratitude-page',
            'affirmations-list-page', 'create-affirmation-page',
            'philosophy-list-page', 'create-philosophy-page',
            'contacts-list-page', 'create-contact-page'
        ];

        // 隐藏所有页面
        allPages.forEach(id => {
            const page = document.getElementById(id);
            if (page) page.classList.add('hidden');
        });

        // 显示目标页面
        const targetPage = document.getElementById(pageId);
        if (targetPage) {
            targetPage.classList.remove('hidden');
        }

        // 更新导航栏
        updateActiveTab(pageId);

        // 加载页面数据
        switch(pageId) {
            case 'home-page':
                loadHomeData();
                break;
            case 'capsule-list-page':
                loadCapsules();
                break;
            case 'chain-list-page':
                loadChains();
                break;
            case 'sentence-list-page':
                loadSentences();
                break;
            case 'user-profile-page':
                loadUserProfile();
                break;
            case 'gratitude-list-page':
                loadGratitudes();
                break;
            case 'affirmations-list-page':
                loadAffirmations();
                break;
            case 'philosophy-list-page':
                loadPhilosophies();
                break;
            case 'contacts-list-page':
                loadContacts();
                break;
            case 'create-chain-page':
                loadUnlockedCapsules();
                break;
        }

        // 设置胶囊创建页的最小解锁时间为明天
        if (pageId === 'create-capsule-page') {
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setHours(0,0,0,0);
            document.getElementById('capsule-unlock-time').min = formatDateForInput(tomorrow);
        }
            // 如果是创建页面，清空输入框
    if (pageId === 'create-gratitude-page') {
        document.getElementById('gratitude-content').value = '';
    } else if (pageId === 'create-affirmation-page') {
        document.getElementById('affirmation-content').value = '';
    } else if (pageId === 'create-philosophy-page') {
        document.getElementById('philosophy-content').value = '';
    } else if (pageId === 'create-contact-page') {
        document.getElementById('contact-name').value = '';
        document.getElementById('contact-info').value = '';
        document.getElementById('contact-relation').value = '';
    } else if (pageId === 'create-capsule-page') {
        document.getElementById('capsule-title').value = '';
        document.getElementById('capsule-content').value = '';
        document.getElementById('capsule-recipient').value = '';
        document.getElementById('capsule-image').value = '';
    } else if (pageId === 'create-sentence-page') {
        document.getElementById('sentence-content').value = '';
    }
    }

    function updateActiveTab(pageId) {
        const tabs = document.querySelectorAll('.tab-item');
        tabs.forEach(tab => tab.classList.remove('active', 'text-[#FF7043]'));

        if (pageId === 'home-page') {
            tabs[0].classList.add('active', 'text-[#FF7043]');
        } else if (pageId === 'capsule-list-page' || pageId === 'create-capsule-page') {
            tabs[1].classList.add('active', 'text-[#FF7043]');
        } else if (pageId === 'sentence-list-page' || pageId === 'create-sentence-page') {
            tabs[2].classList.add('active', 'text-[#FF7043]');
        } else if (pageId === 'user-profile-page') {
            tabs[3].classList.add('active', 'text-[#FF7043]');
        }
    }

    // 日期格式化函数
    function formatDate(date) {
        if (!date) return '';
        const d = new Date(date);
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `${month}-${day}`;
    }
async function loadUnlockedCapsules() {
  const select = document.getElementById('chain-capsule');
  select.innerHTML = '<option value="">选择时光胶囊</option>';
  try {
    const capsules = await apiGet(`/capsules/user/${currentUserId}`);
    const unlocked = capsules.filter(c => c.status === '🎉已解锁');
    if (unlocked.length === 0) {
      select.innerHTML += '<option disabled>暂无已解锁的胶囊</option>';
      return;
    }
    unlocked.forEach(c => {
      const option = document.createElement('option');
      option.value = c.id;
      option.textContent = `${c.title} (${formatDate(new Date(c.unlockTime))})`;
      select.appendChild(option);
    });
  } catch (error) {
    select.innerHTML += '<option disabled>加载失败</option>';
  }
}

    function formatDateForInput(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}`;
    }

    // API调用函数
    async function apiGet(endpoint) {
        try {
            const apiUrl = `http://localhost:8080/api${endpoint}`;
            console.log('API Request:', apiUrl);
            const response = await fetch(apiUrl, {
                headers: {
                    'X-User-Id': currentUserId
                }
            });
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || `API 调用失败: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('API 错误:', error);
            showToast(error.message || '网络请求失败', 'error');
            throw error;
        }
    }

    async function apiPost(endpoint, data) {
        try {
            const apiUrl = `http://localhost:8080/api${endpoint}`;
            console.log('API Request:', apiUrl, 'Data:', data);
            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-User-Id': currentUserId
                },
                body: JSON.stringify(data)
            });
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || `API 调用失败: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('API 错误:', error);
            showToast(error.message || '网络请求失败', 'error');
            throw error;
        }
    }

    // 数据加载函数
    async function loadHomeData() {
        showLoading(true);

        try {
            // 获取统计信息
            const [capsuleCount, sentenceCount, chainCount] = await Promise.all([
                apiGet(`/capsules/user/${currentUserId}/count`),
                apiGet(`/sentences/user/${currentUserId}/count`),
                apiGet(`/chains/user/${currentUserId}/count`)
            ]);

            // 更新统计数字
            document.getElementById('capsule-count').textContent = capsuleCount;
            document.getElementById('sentence-count').textContent = sentenceCount;
            document.getElementById('chain-count').textContent = chainCount;

            // 加载最近活动
            await loadRecentActivities();

        } catch (error) {
            console.error('加载首页数据失败:', error);
        } finally {
            showLoading(false);
        }
    }

    async function loadRecentActivities() {
        try {
            const activitiesContainer = document.getElementById('recent-activities');
            const capsules = await apiGet(`/capsules/user/${currentUserId}`);
            const chains = await apiGet(`/chains/user/${currentUserId}`);
            const sentences = await apiGet(`/sentences/user/${currentUserId}`);

            let activities = [];

            // 添加胶囊活动
            capsules.forEach(capsule => {
                activities.push({
                    type: 'capsule',
                    title: `创建了时光胶囊: "${capsule.title}"`,
                    date: formatDate(new Date(capsule.createdAt)),
                    status: capsule.status === '🔒锁定中' ? 'locked' : 'unlocked'
                });
            });

            // 添加传递链活动
            chains.forEach(chain => {
                activities.push({
                    type: 'chain',
                    title: '参与了善意传递链',
                    date: formatDate(new Date(chain.nodes[0].timestamp)),
                    status: chain.completed ? 'completed' : 'active'
                });
            });

            // 添加句子收藏活动
            sentences.forEach(sentence => {
                activities.push({
                    type: 'sentence',
                    title: `收藏了温暖句子: "${sentence.content.substring(0, 20)}..."`,
                    date: formatDate(new Date(sentence.createdAt)),
                    status: 'saved'
                });
            });

            // 按时间倒序排序
            activities.sort((a, b) => {
                const dateA = new Date(a.date);
                const dateB = new Date(b.date);
                return dateB - dateA;
            });

            // 只显示最近3个活动
            activities = activities.slice(0, 3);

            // 生成HTML
            let activitiesHTML = '';
            activities.forEach(activity => {
                let statusClass = '';
                let statusText = '';

                if (activity.status === 'locked') {
                    statusClass = 'bg-[#FFE0B2] text-[#FF7043]';
                    statusText = '未解锁';
                } else if (activity.status === 'unlocked') {
                    statusClass = 'bg-green-100 text-green-600';
                    statusText = '已解锁';
                } else if (activity.status === 'active') {
                    statusClass = 'bg-blue-100 text-blue-600';
                    statusText = '进行中';
                } else if (activity.status === 'completed') {
                    statusClass = 'bg-purple-100 text-purple-600';
                    statusText = '已完成';
                } else {
                    statusClass = 'bg-gray-100 text-gray-600';
                    statusText = '已保存';
                }

                activitiesHTML += `
                    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium text-[#5D4037]">${activity.title}</p>
                                <p class="text-xs text-[#8D6E63] mt-1">${activity.date}</p>
                            </div>
                            <span class="text-xs px-2 py-1 ${statusClass} rounded-full">${statusText}</span>
                        </div>
                    </div>
                `;
            });

            // 如果没有活动，显示提示
            if (activities.length === 0) {
                activitiesHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-history text-3xl mb-3 text-[#8D6E63]"></i>
                        <p class="text-[#8D6E63]">暂无活动记录</p>
                    </div>
                `;
            }

            activitiesContainer.innerHTML = activitiesHTML;

        } catch (error) {
            console.error('加载最近活动失败:', error);
            const activitiesContainer = document.getElementById('recent-activities');
            activitiesContainer.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-3xl mb-3 text-red-500"></i>
                    <p class="text-red-500">加载活动失败</p>
                </div>
            `;
        }
    }

    async function loadCapsules() {
        const container = document.getElementById('capsule-list');
        container.innerHTML = `
            <div class="loading-state">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>
        `;

        try {
            const capsules = await apiGet(`/capsules/user/${currentUserId}`);

            if (capsules.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="fas fa-archive"></i>
                        </div>
                        <div class="empty-state-title">暂无时光胶囊</div>
                        <div class="empty-state-description">写给未来的温暖话语，可以是一封信、一段话，或是对未来的期许</div>
                        <button class="empty-state-button" onclick="showPage('create-capsule-page')">创建第一个胶囊</button>
                    </div>
                `;
                return;
            }

            let capsulesHTML = '';
            capsules.forEach(capsule => {
                const isUnlocked = capsule.status === '🎉已解锁';
                const statusText = isUnlocked ? '🎉已解锁' : '🔒锁定中';

                let countdown = '';
                if (!isUnlocked) {
                    // 计算倒计时
                    const now = new Date();
                    const unlockTime = new Date(capsule.unlockTime);
                    const diffMs = unlockTime - now;

                    if (diffMs > 0) {
                        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                        const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        countdown = `距离解锁还有${diffDays}天${diffHours}小时`;
                    } else {
                        countdown = '即将解锁';
                    }
                } else {
                    countdown = '已解锁';
                }

                capsulesHTML += `
                    <div class="capsule-card p-4" onclick="showCapsuleDetail(${capsule.id})">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-medium text-[#5D4037]">${capsule.title}</h4>
                            <span class="text-xs px-2 py-1 bg-${isUnlocked ? 'green' : 'yellow'}-100 text-${isUnlocked ? 'green' : 'yellow'}-600 rounded-full">${statusText}</span>
                        </div>
                        <p class="text-sm text-[#8D6E63] mb-3">${capsule.content.substring(0, 60)}${capsule.content.length > 60 ? '...' : ''}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-[#8D6E63]">${formatDate(new Date(capsule.createdAt))}</span>
                            <span class="text-xs text-${isUnlocked ? 'green' : 'blue'}-600">${countdown}</span>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = capsulesHTML;
        } catch (error) {
            console.error('加载胶囊列表失败:', error);
            container.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-3xl mb-3 text-red-500"></i>
                    <p class="text-red-500">加载失败，请重试</p>
                </div>
            `;
        }
    }

    function showCapsuleDetail(capsuleId) {
        // 实际应用中应该跳转到详情页
        showToast('正在加载胶囊详情...', 'info');
        setTimeout(() => {
            showPage('capsule-detail-page');
        }, 500);
    }

    async function loadChains() {
        const container = document.getElementById('chain-list');
        container.innerHTML = `
            <div class="loading-state">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>
        `;

        try {
            const chains = await apiGet(`/chains/user/${currentUserId}`);

            if (chains.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <div class="empty-state-title">暂无善意链</div>
                        <div class="empty-state-description">启动一个善意传递链，将温暖传递给更多人</div>
                        <button class="empty-state-button" onclick="showPage('create-chain-page')">启动传递链</button>
                    </div>
                `;
                return;
            }

            let chainsHTML = '';
            chains.forEach(chain => {
                const isCompleted = chain.completed;
                const progress = chain.nodes.length;
                const progressText = isCompleted
                    ? `温度：${45}℃ · 已完成`
                    : `${chain.progressText}`;

                chainsHTML += `
                    <div class="capsule-card p-4" onclick="showChainDetail(${chain.id})">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-medium text-[#5D4037]">善意传递</h4>
                            <span class="text-xs px-2 py-1 bg-${isCompleted ? 'green' : 'blue'}-100 text-${isCompleted ? 'green' : 'blue'}-600 rounded-full">${isCompleted ? '已完成' : '进行中'}</span>
                        </div>
                        <p class="text-sm text-[#8D6E63] mb-3">传递温暖，让世界更美好</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-[#8D6E63]">${progress}人参与</span>
                            <button class="text-xs text-[#FF7043] bg-[#FFE0B2] px-3 py-1 rounded-full"
                                onclick="participateChain(${chain.id}); event.stopPropagation()">
                                ${isCompleted ? '查看详情' : '参与传递'}
                            </button>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = chainsHTML;
        } catch (error) {
            console.error('加载传递链列表失败:', error);
            container.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-3xl mb-3 text-red-500"></i>
                    <p class="text-red-500">加载失败，请重试</p>
                </div>
            `;
        }
    }

    function showChainDetail(chainId) {
        // 实际应用中应该跳转到详情页
        showToast('正在加载传递链详情...', 'info');
        setTimeout(() => {
            showPage('chain-detail-page');
        }, 500);
    }

    async function loadSentences() {
        const container = document.getElementById('sentence-list');
        container.innerHTML = `
            <div class="loading-state">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>
        `;

        try {
            const sentences = await apiGet(`/sentences/user/${currentUserId}`);

            if (sentences.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="empty-state-title">暂无收藏句子</div>
                        <div class="empty-state-description">收藏温暖的话语，让它们成为你的能量源泉</div>
                        <button class="empty-state-button" onclick="showPage('create-sentence-page')">收藏第一句</button>
                    </div>
                `;
                return;
            }

            let sentencesHTML = '';
            sentences.forEach(sentence => {
                sentencesHTML += `
                    <div class="bg-white/80 rounded-2xl p-4 soft-shadow">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-sm text-[#5D4037]">${sentence.content}</p>
                                <span class="text-xs text-[#8D6E63]">${formatDate(new Date(sentence.createdAt))}</span>
                            </div>
                            <button class="text-xs text-red-500" onclick="deleteSentence(${sentence.id})">删除</button>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = sentencesHTML;
        } catch (error) {
            console.error('加载收藏句子列表失败:', error);
            container.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-3xl mb-3 text-red-500"></i>
                    <p class="text-red-500">加载失败，请重试</p>
                </div>
            `;
        }
    }

    async function loadUserProfile() {
        const container = document.getElementById('user-profile-page');

        // 显示加载状态
        container.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full">
                <div class="loading-spinner"></div>
                <p class="mt-2">加载用户资料...</p>
            </div>
        `;

        try {
            const user = await apiGet(`/users/${currentUserId}`);
            const [capsuleCount, sentenceCount, chainCount] = await Promise.all([
                apiGet(`/capsules/user/${currentUserId}/count`),
                apiGet(`/sentences/user/${currentUserId}/count`),
                apiGet(`/chains/user/${currentUserId}/count`)
            ]);

            // 更新用户信息
            document.getElementById('user-name').textContent = user.name;
            document.getElementById('last-active').textContent = user.lastActive.substring(0, 10);
            document.getElementById('user-temperature').textContent = `${user.temperature}℃`;

            // 更新温度条
            const temperature = Math.min(100, user.temperature);
            document.getElementById('temperature-fill').style.width = `${temperature}%`;

            // 更新统计信息
            document.getElementById('capsule-count-profile').textContent = capsuleCount;
            document.getElementById('sentence-count-profile').textContent = sentenceCount;
            document.getElementById('chain-count-profile').textContent = chainCount;

        } catch (error) {
            console.error('加载用户资料失败:', error);
            container.innerHTML = `
                <div class="text-center p-6">
                    <i class="fas fa-exclamation-triangle text-3xl text-red-500 mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">加载失败</h3>
                    <p class="text-gray-600 mb-4">无法加载用户资料，请检查网络连接</p>
                    <button class="warm-button" onclick="loadUserProfile()">重试</button>
                </div>
            `;
        }
    }

    // 情感急救功能
    async function loadGratitudes() {
        const container = document.getElementById('gratitude-list');
        const loadingState = document.getElementById('gratitude-loading');
        const emptyState = document.getElementById('gratitude-empty');

        // 显示加载状态
        loadingState.classList.remove('hidden');
        container.classList.add('hidden');
        emptyState.classList.add('hidden');

        try {
            const gratitudes = await apiGet(`/gratitudes/user/${currentUserId}`);

            if (gratitudes.length === 0) {
                emptyState.classList.remove('hidden');
                container.classList.add('hidden');
            } else {
                emptyState.classList.add('hidden');
                container.classList.remove('hidden');

                let gratitudesHTML = '';
                gratitudes.forEach(gratitude => {
                    gratitudesHTML += `
                        <div class="item-card gratitude-item">
                            <div class="flex justify-between items-start mb-2">
                                <p class="text-[#5D4037]">${gratitude.content}</p>
                                <button class="text-xs text-[#FF7043]" onclick="deleteGratitude(${gratitude.id})">删除</button>
                            </div>
                            <span class="date-badge">${formatDate(new Date(gratitude.createdAt))}</span>
                        </div>
                    `;
                });

                container.innerHTML = gratitudesHTML;
            }
        } catch (error) {
            console.error('加载感恩记录失败:', error);
            container.innerHTML = `
                <div class="text-center p-6">
                    <i class="fas fa-exclamation-triangle text-3xl text-red-500 mb-4"></i>
                    <p class="text-red-500">加载失败</p>
                </div>
            `;
            container.classList.remove('hidden');
            loadingState.classList.add('hidden');
        } finally {
            loadingState.classList.add('hidden');
        }
    }

    async function loadAffirmations() {
        const container = document.getElementById('affirmations-list');
        const loadingState = document.getElementById('affirmations-loading');
        const emptyState = document.getElementById('affirmation-empty');

        // 显示加载状态
        loadingState.classList.remove('hidden');
        container.classList.add('hidden');
        emptyState.classList.add('hidden');

        try {
            const affirmations = await apiGet(`/affirmations/user/${currentUserId}`);

            if (affirmations.length === 0) {
                emptyState.classList.remove('hidden');
                container.classList.add('hidden');
            } else {
                emptyState.classList.add('hidden');
                container.classList.remove('hidden');

                let affirmationsHTML = '';
                affirmations.forEach(affirmation => {
                    affirmationsHTML += `
                        <div class="item-card affirmation-item">
                            <div class="flex justify-between items-start mb-2">
                                <p class="text-[#5D4037]">${affirmation.content}</p>
                                <button class="text-xs text-[#FF7043]" onclick="deleteAffirmation(${affirmation.id})">删除</button>
                            </div>
                            <span class="date-badge">${formatDate(new Date(affirmation.createdAt))}</span>
                        </div>
                    `;
                });

                container.innerHTML = affirmationsHTML;
            }
        } catch (error) {
            console.error('加载肯定语失败:', error);
            container.innerHTML = `
                <div class="text-center p-6">
                    <i class="fas fa-exclamation-triangle text-3xl text-red-500 mb-4"></i>
                    <p class="text-red-500">加载失败</p>
                </div>
            `;
            container.classList.remove('hidden');
            loadingState.classList.add('hidden');
        } finally {
            loadingState.classList.add('hidden');
        }
    }

    async function loadPhilosophies() {
        const container = document.getElementById('philosophy-list');
        const loadingState = document.getElementById('philosophy-loading');
        const emptyState = document.getElementById('philosophy-empty');

        // 显示加载状态
        loadingState.classList.remove('hidden');
        container.classList.add('hidden');
        emptyState.classList.add('hidden');

        try {
            const philosophies = await apiGet(`/philosophies/user/${currentUserId}`);

            if (philosophies.length === 0) {
                emptyState.classList.remove('hidden');
                container.classList.add('hidden');
            } else {
                emptyState.classList.add('hidden');
                container.classList.remove('hidden');

                let philosophiesHTML = '';
                philosophies.forEach(philosophy => {
                    philosophiesHTML += `
                        <div class="item-card philosophy-item">
                            <div class="flex justify-between items-start mb-2">
                                <p class="text-[#5D4037]">${philosophy.content}</p>
                                <button class="text-xs text-[#FF7043]" onclick="deletePhilosophy(${philosophy.id})">删除</button>
                            </div>
                            <span class="date-badge">${formatDate(new Date(philosophy.createdAt))}</span>
                        </div>
                    `;
                });

                container.innerHTML = philosophiesHTML;
            }
        } catch (error) {
            console.error('加载处世哲学失败:', error);
            container.innerHTML = `
                <div class="text-center p-6">
                    <i class="fas fa-exclamation-triangle text-3xl mb-3 text-red-500"></i>
                    <p class="text-red-500">加载失败</p>
                </div>
            `;
            container.classList.remove('hidden');
            loadingState.classList.add('hidden');
        } finally {
            loadingState.classList.add('hidden');
        }
    }

    async function loadContacts() {
        const container = document.getElementById('contacts-list');
        const loadingState = document.getElementById('contacts-loading');
        const emptyState = document.getElementById('contact-empty');

        // 显示加载状态
        loadingState.classList.remove('hidden');
        container.classList.add('hidden');
        emptyState.classList.add('hidden');

        try {
            const contacts = await apiGet(`/contacts/user/${currentUserId}`);

            if (contacts.length === 0) {
                emptyState.classList.remove('hidden');
                container.classList.add('hidden');
            } else {
                emptyState.classList.add('hidden');
                container.classList.remove('hidden');

                let contactsHTML = '';
                contacts.forEach(contact => {
                    contactsHTML += `
                        <div class="item-card contact-item">
                            <div class="contact-card">
                                <div class="contact-avatar">
                                    <span>${contact.name.charAt(0)}</span>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">${contact.name}</div>
                                    <div class="contact-details">
                                        <span>${contact.info}</span>
                                        <span class="contact-relation">${contact.relation}</span>
                                    </div>
                                </div>
                                <button class="text-xs text-[#FF7043]" onclick="deleteContact(${contact.id})">删除</button>
                            </div>
                            <span class="date-badge">${formatDate(new Date(contact.createdAt))}</span>
                        </div>
                    `;
                });

                container.innerHTML = contactsHTML;
            }
        } catch (error) {
            console.error('加载联系人失败:', error);
            container.innerHTML = `
                <div class="text-center p-6">
                    <i class="fas fa-exclamation-triangle text-3xl text-red-500 mb-4"></i>
                    <p class="text-red-500">加载失败</p>
                </div>
            `;
            container.classList.remove('hidden');
            loadingState.classList.add('hidden');
        } finally {
            loadingState.classList.add('hidden');
        }
    }
function showCapsuleDetail(capsuleId) {
  showPage('capsule-detail-page');
  loadCapsuleDetail(capsuleId);
}

async function loadCapsuleDetail(capsuleId) {
  const container = document.getElementById('capsule-content-container');
  const imageContainer = document.getElementById('capsule-image-container');
  const imageElement = document.getElementById('capsule-image');

  // 重置所有元素
  container.innerHTML = `
    <div class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  `;
  imageContainer.classList.add('hidden');
  imageElement.src = '';

  try {
    const capsule = await apiGet(`/capsules/${capsuleId}`);

    // 处理图片显示 - 直接使用后端返回的完整URL
    if (capsule.imageUrl) {
      imageElement.src = capsule.imageUrl;
      imageContainer.classList.remove('hidden');
    }

    const isUnlocked = capsule.status === '🎉已解锁';
    let actionButton = '';

    if (isUnlocked) {
      try {
        const chainCount = await apiGet(`/chains/user/${currentUserId}/count?capsuleId=${capsuleId}`);
        if (chainCount === 0) {
          actionButton = `
            <button onclick="startChainFromCapsule(${capsule.id})" class="warm-button w-full mt-4">
              启动善意传递
            </button>
          `;
        } else {
          actionButton = `
            <div class="text-center p-3 bg-blue-50 rounded-lg">
              <i class="fas fa-check-circle text-blue-500 mr-2"></i>
              <span class="text-blue-700">已启动传递链</span>
            </div>
          `;
        }
      } catch (error) {
        actionButton = `
          <button onclick="startChainFromCapsule(${capsule.id})" class="warm-button w-full mt-4">
            启动善意传递
          </button>
        `;
      }
    }

    // 渲染胶囊内容
    container.innerHTML = `
      <div class="bg-white/80 rounded-2xl p-6 soft-shadow">
        <h3 class="text-xl font-bold text-[#5D4037] mb-3">${capsule.title}</h3>
        <p class="text-[#8D6E63] mb-4">${capsule.content}</p>
        <div class="flex justify-between text-sm text-[#8D6E63]">
          <span>创建于 ${formatDate(new Date(capsule.createdAt))}</span>
          <span>状态：${capsule.status}</span>
        </div>
        ${isUnlocked ? `<div class="mt-3 text-xs text-[#FF7043]">温度：${capsule.temperature}℃</div>` : ''}
      </div>
      ${actionButton}
    `;
  } catch (error) {
    container.innerHTML = `<p class="text-red-500">加载失败: ${error.message}</p>`;
    console.error('加载胶囊详情失败:', error);
  }
}
// 从详情页启动传递链
async function startChainFromCapsule(capsuleId) {
  try {
    await apiPost(`/chains/start/${capsuleId}`, {});
    showToast('善意传递链已启动！', 'success');
    showPage('chain-list-page');
  } catch (error) {
    showToast('启动失败：' + error.message, 'error');
  }
}
    // 创建功能
async function createCapsule() {
    const title = document.getElementById('capsule-title').value;
    const content = document.getElementById('capsule-content').value;
    const unlockTime = document.getElementById('capsule-unlock-time').value;
    const recipient = document.getElementById('capsule-recipient').value;
    const imageInput = document.getElementById('capsule-image');

    if (!content ) {
        showToast('内容必填哦', 'error');
        return;
 }

    // 验证解锁时间是否至少为明天
    const unlockDate = new Date(unlockTime);
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(0,0,0,0);

    if (unlockDate < tomorrow) {
        showToast('解锁时间至少为明天', 'error');
        return;
    }

    try {
        // 处理图片上传
        let imageUrl = null;
        if (imageInput.files && imageInput.files[0]) {
            try {
                const formData = new FormData();
                formData.append('image', imageInput.files[0]);

                const response = await fetch('http://localhost:8080/api/upload', {
                    method: 'POST',
                    headers: {
                        'X-User-Id': currentUserId
                    },
                    body: formData
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '图片上传失败');
                }

                const data = await response.json();
                imageUrl = data.url;
            } catch (error) {
                console.error('图片上传失败:', error);
                showToast(`图片上传失败: ${error.message}`, 'error');
                return;
            }
        }

        const capsule = {
            title: title,
            content: content,
            unlockTime: unlockTime,
            recipientName: recipient,
            imageUrl: imageUrl
        };

        await apiPost('/capsules', capsule);

        showToast('时光胶囊创建成功！', 'success');
        showPage('capsule-list-page');
        // 清空输入框
        document.getElementById('capsule-title').value = '';
        document.getElementById('capsule-content').value = '';
        document.getElementById('capsule-recipient').value = '';
        document.getElementById('capsule-image').value = '';
    } catch (error) {
        console.error('创建胶囊失败:', error);
    }
}

    async function startChain() {
        const capsuleId = document.getElementById('chain-capsule').value;
        if (!capsuleId) {
            showToast('必须选择一个已解锁的时光胶囊', 'error');
            return;
        }

        try {
            await apiPost(`/chains/start/${capsuleId}`, {});
            showToast('善意链启动成功', 'success');
            showPage('chain-list-page');
        } catch (error) {
            console.error('启动传递链失败:', error);
        }
    }

    async function participateChain(chainId) {
        try {
            const message = prompt('写下你想说的温暖话语(100字以内)');
            if (!message || message.length > 100) {
                showToast('字数不合规', 'error');
                return;
            }

            // 清理消息中的负面词
            const cleanedMessage = message
                .replace(/(累|疲惫|难过|烦|苦|痛)/g, "疲惫的云")
                .replace(/(伤心|绝望|痛苦)/g, "等待阳光的云朵");

            await apiPost(`/chains/${chainId}/nodes?message=${encodeURIComponent(cleanedMessage)}`);

            // 重新加载传递链
            loadChains();

            showToast('温暖传递成功！', 'success');
        } catch (error) {
            console.error('参与传递链失败:', error);
        }
    }

    function closeCelebration() {
        document.getElementById('celebration-overlay').classList.add('hidden');
        showPage('chain-list-page');
    }

    function shareCelebration() {
        showToast('已复制分享链接', 'success');
        // 在实际应用中，这里会实现分享功能
    }

    async function createSentence() {
        const content = document.getElementById('sentence-content').value;
        if (!content) {
            showToast('请输入句子内容', 'error');
            return;
        }

        try {
            const sentence = {
                content: content
            };

            await apiPost('/sentences', sentence);

            showToast('句子收藏成功！', 'success');
            showPage('sentence-list-page');
        } catch (error) {
            console.error('收藏句子失败:', error);
        }
    }

    async function apiDelete(endpoint) {
    try {
        const apiUrl = `http://localhost:8080/api${endpoint}`;
        console.log('API Request (DELETE):', apiUrl);
        const response = await fetch(apiUrl, {
            method: 'DELETE',
            headers: {
                'X-User-Id': currentUserId
            }
        });
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message || `API 调用失败: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error('API 错误:', error);
        showToast(error.message || '网络请求失败', 'error');
        throw error;
    }
}
async function deleteSentence(id) {
    if (!confirm('确定要删除这条句子？')) return;

    try {
        await apiDelete(`/sentences/${id}`);
        showToast('句子删除成功', 'success');
        loadSentences();
    } catch (error) {
        console.error('删除句子失败:', error);
    }
}

    async function createGratitude() {
        const content = document.getElementById('gratitude-content').value;
        if (!content) {
            showToast('请输入感恩内容', 'error');
            return;
        }

        try {
            const gratitude = {
                content: content
            };

            await apiPost('/gratitudes', gratitude);

            showToast('感恩记录保存成功！', 'success');
            showPage('gratitude-list-page');
        } catch (error) {
            console.error('保存感恩记录失败:', error);
        }
    }

    async function createAffirmation() {
        const content = document.getElementById('affirmation-content').value;
        if (!content) {
            showToast('请输入肯定语内容', 'error');
            return;
        }

        try {
            const affirmation = {
                content: content
            };

            await apiPost('/affirmations', affirmation);

            showToast('肯定语保存成功！', 'success');
            showPage('affirmations-list-page');
        } catch (error) {
            console.error('保存肯定语失败:', error);
        }
    }

    async function createPhilosophy() {
        const content = document.getElementById('philosophy-content').value;
        if (!content) {
            showToast('请输入处世哲学内容', 'error');
            return;
        }

        try {
            const philosophy = {
                content: content
            };

            await apiPost('/philosophies', philosophy);

            showToast('处世哲学保存成功！', 'success');
            showPage('philosophy-list-page');
        } catch (error) {
            console.error('保存处世哲学失败:', error);
        }
    }

    async function createContact() {
        const name = document.getElementById('contact-name').value;
        const info = document.getElementById('contact-info').value;
        const relation = document.getElementById('contact-relation').value;

        if (!name || !info) {
            showToast('请填写姓名和联系方式', 'error');
            return;
        }

        try {
            const contact = {
                name: name,
                info: info,
                relation: relation
            };

            await apiPost('/contacts', contact);

            showToast('联系人保存成功！', 'success');
            showPage('contacts-list-page');
        } catch (error) {
            console.error('保存联系人失败:', error);
        }
    }

    // 删除功能
    async function deleteGratitude(id) {
        if (!confirm('确定要删除这条感恩记录吗？')) return;

        try {
        await apiDelete(`/gratitudes/${id}`);
            showToast('感恩记录已删除', 'success');
           loadGratitudes();
        } catch (error) {
            console.error('删除感恩记录失败:', error);
        }
    }

    async function deleteAffirmation(id) {
        if (!confirm('确定要删除这条肯定语吗？')) return;

        try {
            await apiDelete(`/affirmations/${id}`, {});
            showToast('肯定语已删除', 'success');
            loadAffirmations();
        } catch (error) {
            console.error('删除肯定语失败:', error);
        }
    }

    async function deletePhilosophy(id) {
        if (!confirm('确定要删除这条处世哲学吗？')) return;

        try {
            await apiDelete(`/philosophies/${id}`, {});
            showToast('处世哲学已删除', 'success');
            loadPhilosophies();
        } catch (error) {
            console.error('删除处世哲学失败:', error);
        }
    }

    async function deleteContact(id) {
        if (!confirm('确定要删除这个联系人吗？')) return;

        try {
            await apiDelete(`/contacts/${id}`, {});
            showToast('联系人已删除', 'success');
            loadContacts();
        } catch (error) {
            console.error('删除联系人失败:', error);
        }
    }

    async function logoutUser() {
        if (confirm('确定要退出登录吗？')) {
            // 实际应用中，应该清除登录状态
            showToast('已退出登录', 'success');
            // 重定向到登录页，但这里直接跳转到首页
            showPage('home-page');
        }
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化时间选择器
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        tomorrow.setHours(0,0,0,0);

        // 设置胶囊创建页的最小解锁时间为明天
        const unlockTimeInput = document.getElementById('capsule-unlock-time');
        if (unlockTimeInput) {
            unlockTimeInput.min = formatDateForInput(tomorrow);
        }

        // 初始化页面 - 直接显示首页
        showPage('home-page');

        // 添加点击外部关闭菜单的功能
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.tab-item')) {
                // 如果点击的是非导航栏区域，可以添加其他逻辑
            }
        });
    });
</script>
</body>
</html>